import React from './react';
import ReactDom from './react-dom';
const style = {
  border: '1px solid red',
};

const ForwardComponent = React.forwardRef((props, ref) => {
  return <input ref={ref} />;
});

class ClassComp extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }
  onFocus = () => {
    this.inputRef.current.focus();
  };
  render() {
    return <input ref={this.inputRef} />;
  }
}

class TestRefComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputA = React.createRef();
    this.inputB = React.createRef();
    this.inputC = React.createRef();
  }

  focusA = () => {
    this.inputA.current.focus();
  };

  focusB = () => {
    this.inputB.current.focus();
  };

  focusC = () => {
    this.inputC.current.onFocus();
  };

  render() {
    return (
      <div>
        <input ref={this.inputA} />
        <button onClick={this.focusA}>聚焦A-原生dom</button>
        <ForwardComponent ref={this.inputB} />
        <button onClick={this.focusB}>聚焦B-forward</button>
        <ClassComp ref={this.inputC} />
        <button onClick={this.focusC}>聚焦C-class component</button>
      </div>
    );
  }
}

const element = (
  <div id="container" style={style}>
    <TestRefComponent />
  </div>
);

ReactDom.render(element, document.getElementById('root2'));
